import {StyleSheet, ScrollView, Modal} from 'react-native';
import {
  Header,
  Img,
  ModalUserInfo,
  ObserverText,
  ObserverView,
} from '../../components';
import React, {useCallback, useEffect, useState} from 'react';
import LogonForm from './logonForm';
import {observer} from 'mobx-react-lite';
import {useGlobalStore, useUserInfoStore} from '../../mobx';
import Mine from '../mine';
import {getColorStr} from '../../themes';
import {dpw12, dpw32, dpw40, dpw42, dpw80, USER_INFO} from '../../constants';
import logoPng from '../../assets/img/common/logo.png';
import {setItem} from '../../utils';
import {postSignIn, UserAssets} from '../../services';

const Login = ({navigation}: any) => {
  const {theme, changeToastKey} = useGlobalStore();
  const {userInfo, setUserInfo} = useUserInfoStore();
  const [visible, setVisible] = useState(false);
  const [coin, setCoin] = useState(0);

  const getCoin = useCallback(() => {
    if (userInfo?.Token) {
      UserAssets({UT: userInfo?.Token})
        .then((res: any) => {
          setCoin(res?.Data?.Coins);
        })
        .catch(() => {});
    }
  }, [userInfo?.Token]);

  useEffect(() => {
    getCoin();
  }, [getCoin]);

  // 签到
  const onSign = () => {
    if (userInfo?.Token && !userInfo?.SignStatus) {
      postSignIn({UT: userInfo?.Token})
        .then(() => {
          getCoin();
          setItem(USER_INFO, {...userInfo, SignStatus: true});
          setUserInfo({...userInfo, SignStatus: true});
          changeToastKey('sendGold');
        })
        .catch(() => {});
    }
  };

  return (
    <ScrollView
      style={{...styles.box, backgroundColor: getColorStr(theme, 'color_2')}}>
      {userInfo && userInfo.Token ? (
        <Mine
          {...userInfo}
          navigation={navigation}
          onSign={onSign}
          coins={coin}
        />
      ) : (
        <>
          <Header
            title="login"
            navigation={navigation}
            isCenter
            isBeforeIcon={false}
          />
          <Img url={logoPng} style={styles.logoImg} isJoin={false} />
          <LogonForm openModal={() => setVisible(true)} />
          <ObserverView
            style={styles.tips}
            themeStyle={{backgroundColor: 'color_6'}}>
            <ObserverText style={styles.tipTitle} tKey="tips" type="desc" />
            <ObserverText style={styles.tip} tKey="tipsOne" type="desc" />
            <ObserverText style={styles.tip} tKey="tipsTwo" type="desc" />
            <ObserverText style={styles.tip} tKey="tipsThree" type="desc" />
          </ObserverView>
        </>
      )}
      <Modal visible={visible} animationType="fade" transparent>
        <ModalUserInfo onClose={() => setVisible(false)} />
      </Modal>
    </ScrollView>
  );
};

export default observer(Login);

const styles = StyleSheet.create({
  box: {
    flex: 1,
  },
  header: {
    height: dpw40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  tips: {
    paddingHorizontal: dpw12,
    paddingVertical: dpw32,
  },
  tipTitle: {
    marginHorizontal: 'auto',
  },
  tip: {
    marginTop: dpw12,
  },
  logoImg: {
    width: dpw80,
    height: dpw80,
    marginHorizontal: 'auto',
    marginTop: dpw42,
    marginBottom: dpw32,
  },
});
